<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="basePath" scope="request" value="<%=request.getContextPath()%>"/>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>发布文章-资讯管理</title>
	
    <c:import url="/public/head-tag.jsp"/>
    <link rel="stylesheet" href="/pages/assets/css/service/service.css" />
</head>
<body>
	
    <c:import url="/public/header.jsp"/>
    <section class="container">
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				<div class="bread">
    					<a href="/demo/web/news/listPage">资讯管理</a>
    					<span>&gt;</span>
    					<span>发布文章</span>
    				</div>
    			</h3>
    		</div>
    		<div class="content-main">
    			<div class="block block-main">
    			<div class="form-block">
						<div class="form-row">
							<span class="row-label">新闻类型：</span>
							<div class="row-content">
								<select id="newsType" name="flagtype"  class="select">
									<option value="#block-a">内容新闻</option>
									<option value="#block-b">外链新闻</option>
									
								</select>
							</div>
						</div>
					</div>
    				<div class="block-content" id="block-a">
						<form  action="/demo/web/news/addSave" method="post" goback="/demo/web/news/listPage">
							<div class="form-block">
								<div class="form-row">
									<span class="row-label">文章类别：</span>
									<div class="row-content">
										<select activity-select name="newsType"  class="select"  ipattern="^\d+$" iname="新闻类别">
											<c:forEach items="${selectList}" var="option">
									           <option value="${option.id}">${option.title}</option>
                                             </c:forEach>
										</select>									
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">发布日期：</span>
									<div class="row-content">
										<input name="time"  fee="true"  dateSingleSelect type="text"  class="text"  iname="截止日期"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">新闻标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,60}$" iname="活动标题"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">新闻内容：</span>
									<div class="row-content">
										<textarea name="content" id="desc" class="textarea" iname="活动介绍"  style="width:100%;min-width:300px;height:150px;"></textarea>
									</div>
								</div>

								
								<%-- <div class="form-row">
									<span class="row-label">轮播图：</span>
									<div class="row-content">
										<ul class="file-list fn-clear" data-template="item/image/banner">
											<li class="file-item file-btn">
												<div class="btn btn-upload" data-text="添加图片">
													<input type="file" name="bannerImage"  data-params='{"url":"${basePath}/web/resource/upload?flag=1"}'  class="file-upload" multiple="false"/>
												</div>
											</li>
										</ul>
										<p class="value-note">轮播图规格：500X300</p>
									</div>
								</div> --%>
								
								<!-- <div class="form-row">
									<span class="row-label">活动权重：</span>
									<div class="row-content">
										<input name="weight" type="text" placeholder="权重越高，排名越靠前"  class="text"   ipattern="^\d+$" iname="活动权重"/>
									</div>
								</div> -->
								
								<div class="form-row">
									<span class="row-label">原创作者：</span>
									<div class="row-content">
										<input type="text" class="text" iname="原创作者" irequired="false" placeholder="原创作者" name="oper" />
										<p class="value-note">若没有原创作者此处请留空</p>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">原文地址：</span>
									<div class="row-content">
										<input type="text" class="text" iname="启动页链接地址" ipattern="^http:\/\/" irequired="false" placeholder="http://" name="url" />
										<p class="value-note">如：http://www.baidu.com,若为原创此处请留空</p>
									</div>
								</div>
								
								<!-- <div class="form-row">
									<span class="row-label">状态设置：</span>
									<div class="row-content">
										<p class="row-value">
										<p>
											<input type="checkbox" name="isTop" id="isTop"/>
											<label for="isTop">置顶</label>
										</p>
										<p>
											<input type="checkbox" name="isLoop" id="isLoop"/>
											<label for="isLoop">轮播</label>
										</p>
									</div>
								</div> -->
								
								<div class="form-row form-row-btn">
									<div class="row-content">
									    <input type="hidden" name="flagtype" value="1">
										<input type="submit" value="提交内容" class="btn btn-default"/>
									</div>
								</div>
							</div>
						</form>
						
    				</div>
    			
    				<div class="block-content" id="block-b">
						<form  action="/demo/web/news/addSave" method="post" goback="/demo/web/news/listPage">
							<div class="form-block">
								<div class="form-row">
									<span class="row-label">新闻类别：</span>
									<div class="row-content">
										<select activity-select name="newsType"  class="select"  ipattern="^\d+$" iname="新闻类别">
											<c:forEach items="${selectList}" var="option">
									           <option value="${option.id}">${option.title}</option>
                                             </c:forEach>
										</select>	
									</div>
								</div>
								<input type = "hidden" name ="id" id = "id"  ">
								<div class="form-row">
									<span class="row-label">发布日期：</span>
									<div class="row-content">
										<input name="time"  fee="true"  dateSingleSelect type="text"  class="text"  iname="截止日期" value="${news.time}"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">文章标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,60}$" iname="活动标题"  />
									</div>
								</div>
								
								
									<div class="form-row">
									<span class="row-label">新闻内容：</span>
									<div class="row-content">
										<input name="content" type="text" class="text"   ipattern="^.{2,60}$" iname="新闻内容"  />
									</div>
								</div>
								
								<%-- <div class="form-row">
									<span class="row-label">轮播图：</span>
									<div class="row-content">
										<ul class="file-list fn-clear" data-template="item/image/banner">
											<li class="file-item file-btn">
												<div class="btn btn-upload" data-text="添加图片">
													<input type="file" name="bannerImage"  data-params='{"url":"${basePath}/web/resource/upload?flag=1"}'  class="file-upload" multiple="false"/>
												</div>
											</li>
										</ul>
										<p class="value-note">轮播图规格：500X300</p>
									</div>
								</div> --%>
								
							<!-- 	<div class="form-row">
									<span class="row-label">活动权重：</span>
									<div class="row-content">
										<input name="weight" type="text" placeholder="权重越高，排名越靠前"  class="text"   ipattern="^\d+$" iname="活动权重"/>
									</div>
								</div> -->
								
								<div class="form-row">
									<span class="row-label">原创作者：</span>
									<div class="row-content">
										<input type="text" class="text" iname="原创作者" irequired="false" placeholder="原创作者" name="oper"  "/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">原文地址：</span>
									<div class="row-content">
										<input type="text" class="text" iname="原文链接地址" ipattern="^http:\/\/" irequired="false" placeholder="http://" name="url" "/>
										<p class="value-note">如：http://www.baidu.com,若为原创此处请留空</p>
									</div>
								</div>
																
								<div class="form-row form-row-btn">
									<div class="row-content">
									    <input type="hidden" name = "flagtype" value="2"/>
										<input type="submit" value="保存修改" class="btn btn-default"/>
									</div>
								</div>
							</div>
						</form>
						
    				</div>
    				
    			</div>

    		</div>
    	</div>
    </section>
    
   <script id="item/image/banner" type="text/template" note="轮播图模板">
    	<li class="file-item" file>
    		<img class="file-item-sm" data-template="${basePath}/web/resource/download?resourceId={{data}}"/>
    		<input type="hidden"  data-template="{{data}}" name="bannerImage"/>
    		<a action="file.remove" class="file-item-remove" href="javascript:;">&times;</a>
    	</li>
   </script>
   
    <script src="/pages/assets/js/libs/LAB/LAB.js"></script>
   <script>
   		var baseUrl="/pages/assets/js/libs/";
   		var UEDITOR_HOME_URL='/pages/assets/js/libs/ueditor/';
   		
   		// 图片上传路径
   		var UEDITOR_UPLOAD_URL="/demo/web/resource/upload?flag=1";
   		
   		// 图片访问地址
   		var imageUrlPrefix='/demo/web/resource/download/';
   		
   		var imagePattern="http://radio1.iwxlh.com/Radio/resource/{{data}}";
   		
   		$LAB.require({
   			baseUrl:baseUrl,
   			scripts:[
   				["artTemplate/artTemplate2.js",'artTemplate/artTemplate.helpers.js'],
	   			["form/jquery.formCheck.js","form/jquery.ajaxSubmit.js"],
	   			["uploadify/uploadify.css","uploadify/uploadify-min.js"],
	   			["calendar/datepicker.css","calendar/bootstrap-datepicker.js"],
	   			//["umeditor/themes/default/css/umeditor.min.css","umeditor/umeditor.min.js","umeditor/umeditor.config.js"]
	   			["ueditor/themes/default/css/ueditor.min.css","ueditor/ueditor.config.js","ueditor/ueditor.all.js"]
	   			//["simditor/styles/simditor.css","simditor/styles/simditor-video.css","simditor/scripts/module.min.js","simditor/scripts/hotkeys.min.js","simditor/scripts/simditor.js",'simditor/scripts/simditor-video.js']
   			]
   		},function(){    		
   			var App={
    			alert : function(){
    				alert(arguments[0]);
    			},
				initPhotosUploadify : function(){
					$(".file-list").each(function(){
						var $fileList=$(this),
						    $addFile=$fileList.find(".file-btn"),
							$fileInput=$fileList.find("input:file"),
							config=$fileList.data("config")||{},
							MAX_UPLOAD=config.maxUpload||1,
							previewTemplate=$fileList.data("template");  //预览图模板ID
						
						function checkCounts(){
							if(($fileList.find(".file-item[file]").length)>=(MAX_UPLOAD)){
								$addFile.hide();
								return false
							}
							else $addFile.show()
							return true
						}
						
						$fileList.on("click","[action]",function(e){
							var $this=$(this);
							var action=$this.attr("action");
							
							if(action=="file.remove"){
								var id=$this.data("id");
								var $parent=$this.parent().hide();
								var $input=$parent.find("input[name]");
								if($input.is("[old]")){
									$input.attr("name",$input.attr("name")+"_"+"remove[]")
								}
								else{
									$parent.remove();
								}
								checkCounts();
							}
						});
						
						// 生成一个唯一的图片ID
						function getFileId(data,createNew){
							var file=data.files[0];
							var id="file-"+$.md5([file.name,file.size,file.type,file.lastModified].join("_"));
//							var queryTestNumber=$("[id="+id+"]").length;
							return id;
						}
						
						var params=$fileInput.data("params");
						var api=params.url; //上传接口
					    $fileInput.fileupload({
							global: false,
					        url: api,
					        dropZone:false,
					        dataType: 'json',
				 			//limitMultiFileUploads : 4,
				 			//limitMultiFileUploadSizeOverhead : 1024*3,
				 			autoUpload : false,
				 			fail : function(e,data){
				 				var id=getFileId(data);
								var $file=$("#"+id);
								$file.addClass("upload-fail").find(".upload-overlay").text("上传失败");
				 			},
				 			add : function(e,data){
				 				//只允许通过文件选择上传
				 				if(!data.fileInput) return;
				 				var $imgItem=$(document.getElementById(previewTemplate).innerHTML).addClass("uploading");
				 				var $uploadOverlay=$('<div class="upload-overlay"></div>');
				 				$imgItem.append($uploadOverlay);
				 				
				 				var id=getFileId(data,true);
				 				$imgItem.attr("id",id);
				 				$imgItem.insertBefore($addFile)
				 				data.submit();
				 				checkCounts();
				 			},
				 			start : function(e,data){
				 				//console.info("start");
				 			},
					        done: function (e, data) {
					        	var result=data.result;
					        	
					        	var code=result.code;
					        	var msg=result.msg;
					        	
					        	// 上传成功后移除id，解决上传同一个图片不能正确显示预览图的问题
					        	var $imgItem=$fileList.find(".image-loading").eq(0).removeClass("image-loading").removeAttr("id");
					        	var $img=$imgItem.find("img").fadeIn(500);
					        	
					        	// 预览图模板
					        	var previewTemplate=$img.data("template");
					        	$img.attr("src",template.compile(previewTemplate)(result));
					        	
					        	//隐藏表单元素值模板
					        	var $input=$imgItem.find("input:hidden");
					        	var inputValueTemplate=$input.data("template");
					        	$input.val(template.compile(inputValueTemplate)(result))
					        },
					        progress: function (e, data) {
					        	var fileId=getFileId(data);
					        	var $file=$("#"+fileId);
					            var progress = parseInt(data.loaded / data.total * 100, 10);
					        	var $progressBar=$file.find(".upload-overlay").show().text(progress+"%");
								if(progress==100){
									 $file.addClass("image-loading").removeClass("uploading");
									 $progressBar.remove();
								}
					        }
					    })
					    checkCounts();
					})
				},
    			initDatePicker:function(){
					var today=new Date();
					var defaultDate=today;
		    		$('[dateSingleSelect]').datepicker({
		    			todayHighlight:true,
		    			language:"zh-CN",
		    			format : "yyyy-mm-dd",
		    			autoclose:true
		    		}).each(function(){
		    			var $this=$(this);
		    			var value=$this.val();
		    			if(!value){
				    		$(this).data('datepicker').setDate(defaultDate)
		    			}
		    		})
    			},
    			initEvents:function(){
    				$('#newsType').on('change',function(){
    					var value=$(this).val();
    					$('.block-content').hide();
    					$(value).show();
    				})
    				.trigger('change')
    				
    			},
    			// 初始化编辑器
    			initEditor:function(){
    				var editor = new Simditor({
					  textarea: $('#desc'),
					  toolbarFloat: false,
					  enableAutoSave:false,
					  upload:true,
					  pasteImage: true,
					  toolbar :[
						  'title',          // 标题文字
						  'bold',           // 加粗文字
						  'italic',         // 斜体文字
						  'underline',      // 下划线文字
						  'strikethrough',  // 删除线文字
						  'color' ,         // 修改文字颜色
						  'ol' ,            // 有序列表
						  'ul',             // 无序列表
						  'image',          // 插入图片
						  'hr' ,            // 分割线
						  'indent' ,        // 向右缩进
						  'outdent' ,       // 向左缩进
						  'alignment',      // 水平对齐
						  'video'          // 插入视频
						]
					});
    			},
    			
    			initEditor:function(){
					var ue = UE.getEditor('desc', {
						zIndex :1,
						imageScaleEnabled:false,
						imageActionName:UEDITOR_UPLOAD_URL,
						imageUrlPrefix :imageUrlPrefix,
						imageFieldName :'files',
						imageUploadHandler:function(result){
							return template.compile(imagePattern)(result)
						},
						imageAllowFiles:[".png", ".jpg", ".jpeg", ".gif", ".bmp"],
					    toolbars: [
					        ['anchor', //锚点
					        'undo', //撤销
					        'redo', //重做
					        'bold', //加粗
					        'indent', //首行缩进
					        'italic', //斜体
					        'underline', //下划线
					        'strikethrough', //删除线
					        'subscript', //下标
					        'fontborder', //字符边框
					        'superscript', //上标
					        'formatmatch', //格式刷
					        'blockquote', //引用
					        'pasteplain', //纯文本粘贴模式
					        'preview', //预览
					        'horizontal', //分隔线
					        'removeformat', //清除格式
					        'time', //时间
					        'date', //日期
					        'unlink', //取消链接
					        'inserttitle', //插入标题
					        'insertcode', //代码语言
					        'fontsize', //字号
					        'paragraph', //段落格式
					        'simpleupload', //单图上传
					        //'insertimage', //多图上传
					        'link', //超链接
					        'emotion', //表情
					        'spechars', //特殊字符
					        'map', //Baidu地图
					        'insertvideo', //视频
					        'justifyleft', //居左对齐
					        'justifyright', //居右对齐
					        'justifycenter', //居中对齐
					        'justifyjustify', //两端对齐
					        'forecolor', //字体颜色
					        'backcolor', //背景色
					        'insertorderedlist', //有序列表
					        'insertunorderedlist', //无序列表
					        'fullscreen', //全屏
					        'directionalityltr', //从左向右输入
					        'directionalityrtl', //从右向左输入
					        'rowspacingtop', //段前距
					        'rowspacingbottom', //段后距
					        'pagebreak', //分页
					        'imagenone', //默认
					        'imagecenter', //居中
					        'lineheight', //行间距
					        'music', //音乐
					        ] // 图表
					    ]
					});
    			},
    			initForm:function(){
    				
					$("form").ajaxSubmitify({
						beforeSubmit:function(){
							
							//检查图片是否已上传
							// TODO
						},
						onSuccess:function(result){
							var $this=$(this);
							var code=result.code;
							if(code==200){
								var goback=$this.attr("goback");
								if(goback) location.href=goback;
							}
							else{
								var msg=result.msg || "提交失败！";
								App.alert(msg);
							}
						}
					})
					
    			},
    			init : function(){
					this.initDatePicker();
					this.initPhotosUploadify();
					this.initEditor();
					this.initEvents();
					this.initForm();
    			}
    		}
    		App.init();
    	})
   </script>
    </body>
</html>